<template>
  <div class="wrap">
    <header>{{taskInfo.name}}</header>
    <tab :line-width=2 active-color='#4e9ce6' v-model="index">
      <tab-item class="vux-center" :selected="defaultCurrent === item" v-for="(item, index) in list" @click="demo2 = item" :key="index">{{item}}</tab-item>
    </tab>
    <div class="list">
      <div class="list-item" v-show="index === 0">
        <Group label-width="4.5em" label-margin-right="2em" label-align="left" gutter="0px">
          <x-input title="任务名称" v-model="taskName" placeholder="如：晚会会场"></x-input>
          <x-input title="配合人" v-model="partner" placeholder="如：cookie"></x-input>
          <x-input title="费用" v-model="costCash" placeholder="如：520.00"></x-input>
          <x-input title="所用时长" v-model="costTime" placeholder="如：6"></x-input>
        </Group>
        <Group label-width="4.5em" label-margin-right="2em" label-align="left" gutter="20px">
          <x-textarea title="记录说明" v-model="taskContent" placeholder="请填写详细信息" :show-counter="false" :rows="3"></x-textarea>
          <uploader
            :images="images"
            :max="maxImage"
            :upload-url="uploadUrl"
          ></uploader>
        </Group>
        <div class="sbt">
          <x-button type="primary" action-type="button" @click.native="submitDiary">submit</x-button>
        </div>
      </div>
      <div class="list-item" v-show="index === 1">
        <Group label-width="4.5em" label-margin-right="2em" label-align="left" gutter="0px">
          <x-input title="负责人" v-model="taskInfo.userid" disabled></x-input>
          <x-input title="配合人" v-model="taskInfo.partner_userids" disabled></x-input>
          <datetime title="启动时间" v-model="taskInfo.start_time" value-text-align="left" readonly></datetime>
          <x-input title="预估时间" v-model="value7"></x-input>
          <x-input title="预算" v-model="value7"></x-input>
          <cell title="说明" align-items="flex-start" :value="taskInfo.content"></cell>
        </Group>
      </div>
      <div class="list-item" v-show="index === 2">
        <Group label-margin-right="2em" label-align="left" gutter="0px">
          <cell
          v-for="(value,index) in diaryList"
          :key="index"
          :title="value.content"
          :value="value.createtime">
          </cell>
        </Group>
      </div>
    </div>

    <BottomMenu/>
  </div>
</template>

<script>
import BottomMenu from "@/components/BottomMenu";
import {
  getTaskInfo,
  getDiaryList,
  addDiary,
  getDiaryInfo
} from "../api/getData";
// https://www.npmjs.com/package/vux-uploader
import Uploader from "vux-uploader";

import {
  Tab,
  TabItem,
  Group,
  XInput,
  XTextarea,
  Datetime,
  Cell,
  XButton,
  Box
} from "vux";

export default {
  data() {
    return {
      defaultCurrent: "任务详情",
      index: 0,
      list: ["填写日志", "任务详情", "日志记录"],
      taskId: "",
      taskName: "",
      partner: "",
      costCash: "",
      costTime: "",
      taskContent: "",
      images: [],
      files: "",
      value7: "",
      time1: "2017-06-01",
      taskInfo: {},
      diaryList: [],
      maxImage: 1,
      uploadUrl: ""
    };
  },
  components: {
    Tab,
    TabItem,
    Group,
    XInput,
    XTextarea,
    Datetime,
    Cell,
    XButton,
    BottomMenu,
    Uploader
  },
  methods: {
    async submitDiary() {
      if (!localStorage.getItem("sign")) return;

      const res = await addDiary({
        taskId: this.taskId,
        costTime: this.costTime,
        content: this.taskContent,
        costCash: this.costCash,
        partnerUserids: this.partner,
        images: this.images,
        files: this.files
      });
      
      if (!res.data.errcode) {
        console.log("success");
        const diaryRes = await getDiaryList();
        this.diaryList = diaryRes.data.data.diary_list;
      } else {
        console.log("fail");
      }
    },
    // previewMethod(file) {
    //   console.log(file)
    // },
    addImageMethod() {
      this.$emit("add-image");
    }
  },
  async created() {
    if (!localStorage.getItem("sign")) return;
  
    this.taskId = this.$route.params.taskId;
    const req1 = getTaskInfo(this.taskId);
    const req2 = getDiaryList();
    const res = await Promise.all([req1, req2]);

    if(!res[0].data.errcode)
    this.taskInfo = res[0].data.data.task_info[0];
    if(!res[1].data.errcode)
    this.diaryList = res[1].data.data.diary_list;
    // console.log(res[1])

    // test DiaryInfo api
    // const res1 = await getDiaryInfo('2');
    // console.log(res1)
  }
};
</script>

<style lang="scss" scoped>
header {
  background-color: #f8f8f8;
  height: 50px;
  border-bottom: 1px solid #ededed;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
.wrap {
  margin-bottom: 60px;
  .sbt {
    margin: 10px;
  }
}
</style>
